---
title: 시작하기
version: 5
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import pubspec from "/docs/introduction/getting_started/pubspec";
import dartHelloWorld from "/docs/introduction/getting_started/dart_hello_world";
import pubadd from "/docs/introduction/getting_started/pub_add";
import helloWorld from "/docs/introduction/getting_started/hello_world";
import dartPubspec from "/docs/introduction/getting_started/dart_pubspec";
import dartPubadd from "/docs/introduction/getting_started/dart_pub_add";
import {
  AutoSnippet,
  When,
} from "/src/components/CodeSnippet";
import { Link } from "/src/components/Link";

## 온라인에서 Riverpod 체험해보기

Riverpod을 체험해보려면 [Dartpad](https://dartpad.dev/?null_safety=true&id=ef06ab3ce0b822e6cc5db0575248e6e2)나 [Zapp](https://zapp.run/new)에서 온라인으로 사용해보세요:

<iframe
  src="https://zapp.run/edit/zv2060sv306?theme=dark&lazy=false"
  style={{ width: "100%", border: 0, overflow: "hidden", aspectRatio: "1.5" }}
></iframe>

## 패키지 설치하기

설치하려는 패키지가 정해지면, 아래와 같이 한 줄로 앱에 종속성을 추가합니다:

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet {...pubadd}></AutoSnippet>

</TabItem>

<TabItem value="riverpod">

<AutoSnippet {...dartPubadd}></AutoSnippet>

</TabItem>

</Tabs>

또는, `pubspec.yaml` 내에서 앱에 종속성을 수동으로 추가할 수 있습니다:

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet title="pubspec.yaml" language="yaml" {...pubspec}></AutoSnippet>

그리고, `flutter pub get`으로 패키지를 설치합니다.

<When codegen={true}>
  이제 코드 생성기를 실행할 수 있습니다.{" "}
  <code>flutter pub run build_runner watch</code>.
</When>

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="pubspec.yaml"
  language="yaml"
  {...dartPubspec}
></AutoSnippet>

그리고, `dart pub get`으로 패키지를 설치합니다.

<When codegen={true}>
  이제 코드 생성기를 실행할 수 있습니다.{" "}
  <code>dart run build_runner watch</code>.
</When>

</TabItem>
</Tabs>

이게 전부입니다. 당신의 앱에 [Riverpod]을 추가했습니다!

## riverpod_lint/custom_lint 활성화하기

Riverpod은 선택사항으로 [riverpod_lint] 패키지를 제공합니다.
이 패키지는 더 좋은 코드를 작성하는데 도움이 되는 린트 규칙과 사용자 정의 리팩토링 옵션을 제공합니다.

이전 단계를 수행했다면 이미 패키지가 설치되어 있지만, 활성화하려면 별도의 단계가 필요합니다.

[riverpod_lint]를 활성화하려면, 당신의 `pubspec.yaml`옆에 `analysis_options.yaml`을 추가하고 다음을 포함해야 합니다:

<CodeBlock language="yaml" title="analysis_options.yaml">
  {`analyzer:
  plugins:
    - custom_lint`}
</CodeBlock>

이제 코드베이스에서 Riverpod을 사용할 때 당신이 실수한 경우, IDE에서 경고가 보이게 됩니다.

전체 경고와 리팩토링 목록을 보려면 [riverpod_lint] 페이지를 참고하세요.

:::note
이 경고는 `dart analyze` 명령에서는 표시되지 않습니다.
CI/터미널에서 이 경고를 확인하려면 다음을 실행하세요:

```sh
dart run custom_lint
```

:::

## 사용 예시: Hello world

이제 [Riverpod]를 설치했으니 사용해볼 수 있습니다.

다음 스니펫은 새로운 종속성을 사용하여 "Hello world"를 만드는 방법을 보여줍니다:

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: "Flutter", value: "flutter_riverpod" },
    { label: "Dart only", value: "riverpod" },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...helloWorld}
  translations={{
    helloWorld: "// 값을 저장할 \"provider\"를 생성합니다(여기서는 \"Hello world\").\n// provider를 사용하면 노출된 값을 모의(mock)//재정의(override)할 수 있습니다.",
    ProviderScope: "    // 위젯이 providers를 읽을 수 있게 하려면 전체 애플리케이션을 \"ProviderScope\" 위젯으로 감싸야 합니다.\n    // 여기에 providers의 상태가 저장됩니다.",
    ConsumerWidget: "// Riverpod에 의해 노출되는 StatelessWidget 대신 ConsumerWidget을 확장합니다.",
    HookConsumerWidget: "// Riverpod에 의해 노출되는 HookWidget 대신 HookConsumerWidget을 확장합니다.",
    hooksCodegen_counter: "    // HookConsumerWidget 내부에서 훅을 사용할 수 있습니다.",
  }}
/>

이제 `flutter run`으로 앱을 시작할 수 있습니다.
이렇게 하면 기기에 "Hello world"가 표시됩니다.

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...dartHelloWorld}
  translations={{
    helloWorld: "// 값을 저장할 \"provider\"를 생성합니다(여기서는 \"Hello world\").\n// provider를 사용하면 노출된 값을 모의(mock)//재정의(override)할 수 있습니다.",
    container: "  // 이 객체는 providers의 상태가 저장되는 곳입니다.",
    value: "  // \"컨테이너\" 덕분에 provider를 읽을 수 있습니다.",
  }}
/>

이제 `dart lib/main.dart`으로 앱을 시작할 수 있습니다.
이렇게 하면 콘솔에 "Hello world"가 표시됩니다.

</TabItem>
</Tabs>

## 더 나아가기: 코드 스니펫 설치하기

`Flutter`와 `VS Code`를 사용하고 있다면 [Flutter Riverpod Snippets](https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets)를 사용해보세요.

`Flutter`와 `Android Studio` 또는 `IntelliJ`를 사용하고 있다면 [Flutter Riverpod Snippets](https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets)를 사용해보세요.

![img](/img/snippets/greetingProvider.gif)

## 다음 단계 선택

몇 가지 기본 개념 알아보기:

- <Link documentID="concepts2/providers" />

쿡북(Cookbook) 따라하기:

- <Link documentID="cookbooks/testing" />

[riverpod]: https://github.com/rrousselgit/riverpod
[hooks_riverpod]: https://pub.dev/packages/hooks_riverpod
[flutter_riverpod]: https://pub.dev/packages/flutter_riverpod
[flutter_hooks]: https://github.com/rrousselGit/flutter_hooks
[riverpod_lint]: https://pub.dev/packages/riverpod_lint
